<%@page import="com.javaleague.Constantes"%>
<%@page import="com.javaleague.persistencia.DAOMensajesPrivados"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.javaleague.Mensaje"%>
<%@page import="com.javaleague.sesionUsuario.Usuario"%>
<%
    /**
     *  Document   : mensajes
     *  Author     : TaixMiguel
     */
%>

    <style type="text/css">
        /*Contenedor con todo*/
        #contenedorMensajes {
            position: relative;
            margin: 3% 5% 3% 5%;
            width:  90%;
            height: 500px;
            
            border: 5px solid #53698a;
        }
        
        #leftColMensajes > header,
        #rigthColMensajes > header {
            position: relative;
            width:  100%;
            height: 60px;
            
            border-bottom: 1px solid #98BEE3;
        }/*FIN Contenedor con todo*/
        
        /*Columna izquierda de los mensajes*/
        #leftColMensajes {
            position: relative;
            width:  20%;
            height: 100%;
            
            border-right: 1px solid #98BEE3;
        }
        
        .opcionMenuMensajes {
            float: left;
            width:  90%;
            font-weight: bold;
            
            cursor: pointer;
            padding: 15px 0 15px 10%;
            border-bottom: 1px solid #98BEE3;
        }/*FIN Columna izquierda de los mensajes*/
        
        /*Columna derecha de los mensajes*/
        #rigthColMensajes {
            position: relative;
            width:  80%;
            height: 100%;
            top: -100%;
            left: 20%;
        }
        
        #rigthColMensajes > header > span#titleMensajes {
            position: absolute;
            top:    15px;
            left:   15px;
            
            font-size: 2em;
            text-transform: uppercase;
        }
        
        #rigthColMensajes > header > span#numMensajes {
            position: absolute;
            top:    30px;
            right:  30px;
            
            font-size: 1.4em;
            color:  #FF0000;
        }
        
        #grupoMensajes {
            position: absolute;
            width:  100%;
            height: 440px;
        }
        
        #grupoMensajes > nav > span {
            font-size: 1.2em;
            text-align: center;
            font-weight: bold;
        }
        
        #allMensajes {
            position: absolute;
            width:  100%;
            height: 398px;
            top:    42px;
            
            overflow-x: hidden;
            overflow-y: auto;
        }

        .informacionMensajes {
            float: left;
            text-align: center;
            width:  25%;
            padding: 1% 0 1% 0;
            
            border-bottom: 1px solid #98BEE3;
        }
        
        .informacionMensajes > img {
            width:  14px;
            height: 14px;
        }
        
        .marcadoMensajes {
            background-color: #E9EFF7;
        }
        
        info, delete {
            cursor: pointer;
        }/*FIN Columna derecha de los mensajes*/
        
        /* Leer mensaje */
        div#fondoMensaje {
            position: absolute;
            width:  100%;
            height: 100%;
            top:    0%;
            left:   0%;
            
            z-index: 1;
            opacity: 0.1;
            background-color: black;            
        }
        
        div#Mensaje {
            position: relative;
            width:  50%;
            height: 40%;
            /*top:    30%;*/
            left:   25%;
            
            z-index: 2;
            color: black;
            background-color: white;
            
            border-bottom-left-radius:  20px;
            border-bottom-right-radius: 30px;
        }
        
        div#cerrarMensaje {
            float: right;
            width:  30px;
            height: 30px;
            
            font-weight: bold;
            font-size:  30px;
            text-align: center;
            
            cursor: pointer;
            color: white;            
            background-color: red;
            border-radius: 50%;
        }
        
        div#Mensaje > div#uSenderMesageShow {
            position: relative;
            width:    90%;
            margin:   5% 5% 0% 5%;
        }
        div#Mensaje > div#uAsuntoMesageShow {
            position: relative;
            width:    90%;
            margin:   5% 5% 0% 5%;
        }
        div#Mensaje > div#uTextoMesageShow {
            position: relative;            
            width:   80%;
            border:  1px solid black;
            padding: 5%;
            margin:  5% 5% 0% 5%;
        }
        div#Mensaje > input#uResponseMesageShow {
            position: relative;            
            width: 10%;
            margin: 45% 5% 0% 45%;
        }/* FIN Leer mensaje */
    </style>
    
    <div id="contenedorMensajes">
        <div id="leftColMensajes">
            <header></header>
            <nav>
                <div class="opcionMenuMensajes" id="nuevoMensaje">Nuevo mensaje</div>
                <div class="marcadoMensajes opcionMenuMensajes" id="bandejaEntrada">Bandeja de entrada</div>
                <div class="opcionMenuMensajes" id="bandejaSalida">Bandeja de salida</div>
            </nav>
        </div>
        <div id="rigthColMensajes">
            <header>
                <span id="titleMensajes">Bandeja de entrada</span>
                <span id="numMensajes">Sin leer: <span id="iNumMensajes">0</span></span>
            </header>
            <div id="grupoMensajes">
                <nav>
                    <span class="informacionMensajes">Asunto</span>
                    <span class="informacionMensajes">Remitente</span>
                    <span class="informacionMensajes">Fecha</span>
                    <span class="informacionMensajes">Borrar</span>
                </nav>
                <section id="allMensajes">                    
                </section>
            </div>
        </div>
    </div>
    <div id="showMessage">
        <div id="fondoMensaje"></div>
        <div id="Mensaje">
            <div id="cerrarMensaje">X</div>
            <div style="clear: both"></div>
            <div id="uSenderMesageShow"></div>
            <div id="uAsuntoMesageShow"></div>
            <div id="uTextoMesageShow"></div>
            <input type="button" id="uResponseMesageShow" value="Responder" />
        </div>
    </div>
    
    <script type="text/javascript">
<%
    Usuario user = (Usuario)session.getAttribute("usuario");
    
    ArrayList<Mensaje> mensajes = null;
    mensajes = DAOMensajesPrivados.readMessages(user.getId(), user.getTokenUser());
    
    int numInicial = 0;
    int numFinal = numInicial + 10;
    numFinal = numFinal <= mensajes.size()? numFinal:mensajes.size();
    
    for (int i = numInicial; i < numFinal; i++) {
        out.print("var mensajeMin = new Mensaje(");
        
        out.print(mensajes.get(i).getId() + ",'");
        out.print(mensajes.get(i).getUserSender() + "','");
        out.print(mensajes.get(i).getUserReceiver() + "','");
        out.print(mensajes.get(i).getAsunto() + "','");
        out.print(mensajes.get(i).getTexto() + "','");
        out.print(mensajes.get(i).getFecha() + "',");
        out.print(mensajes.get(i).isLeido()?"true":"false");
        out.println(");");
                
        out.println("if ( !rangoMsg["+numInicial+"])");
        out.println("   mensajes.push(mensajeMin);");
    }
%>

        function bandejaEntrada() {
            bandejaActual = 'Entrada';
            $('#titleMensajes').html('Bandeja de entrada');
            $('.marcadoMensajes').toggleClass('marcadoMensajes');
            $('#bandejaEntrada').addClass('marcadoMensajes');
            $('#grupoMensajes nav span').eq(1).html('Remitente');
            var texto = "";

            for(i=0;i<mensajes.length;i++) {
                if ( mensajes[i].userSender != '<%= user.getNombre() %>') {
                    texto += '<article>';
                    texto += '<info onclick="mostrarMensajeEntrada('+i+')">';
                    var clase = mensajes[i].leido? 'informacionMensajes':'informacionMensajes marcadoMensajes';
                    texto += '<span class="'+clase+'">' + mensajes[i].asunto + '</span>';
                    texto += '<span class="'+clase+'">' + mensajes[i].userSender + '</span>';
                    texto += '<span class="'+clase+'">' + mensajes[i].fecha + '</span>';
                    texto += '</info>';
                    texto += '<delete onclick="borrarMensaje('+i+')">';
                    texto += '<span class="'+clase+'"><img src="http://i.imgur.com/WUYmwhf.png" /></span>';
                    texto += '</delete>';
                    texto += '</article>';
                }
            }

            $('#allMensajes').html(texto);
        }
           
        function bandejaSalida() {
            bandejaActual = 'Salida';
            $('#titleMensajes').html('Bandeja de salida');
            $('.marcadoMensajes').toggleClass('marcadoMensajes');
            $('#bandejaSalida').addClass('marcadoMensajes');
            $('#grupoMensajes nav span').eq(1).html('Destinatario');
            var texto = "";

            for(i=0;i<mensajes.length;i++) {
                if ( mensajes[i].userSender == '<%= user.getNombre() %>') {
                    texto += '<article>';
                    texto += '<info onclick="mostrarMensajeSalida('+i+')">';
                    texto += '<span class="informacionMensajes">' + mensajes[i].asunto + '</span>';
                    texto += '<span class="informacionMensajes">' + mensajes[i].userReceiver + '</span>';
                    texto += '<span class="informacionMensajes">' + mensajes[i].fecha + '</span>';
                    texto += '</info>';
                    texto += '<delete onclick="borrarMensaje('+i+')">';
                    texto += '<span class="informacionMensajes"><img src="http://i.imgur.com/WUYmwhf.png" /></span>';
                    texto += '</delete>';
                    texto += '</article>';
                }
            }

            $('#allMensajes').html(texto);
        }
        
        var nuevoMensaje;
        function crearNuevoMensaje() {
            var widthNavegador = window.screen.width;
            var heigthNavegador = window.screen.height;
            
            var ancho = widthNavegador>1000?1000:500;
            var alto = heigthNavegador>1000?600:350;
            
            var top = (heigthNavegador-alto)/2;
            var left= (widthNavegador-ancho)/2;
            eval('nuevoMensaje = window.open("pages/writeMessage.jsp","nuevo","width='+ancho+',height='+alto+', top='+top+', left='+left+'")');
        }
        
        $('#cerrarMensaje').click(ocultarShowMessage);
        function ocultarShowMessage() {
            $('#showMessage').hide();
        }
        var showMenssage;
        function mostrarMensajeEntrada(numId) {
            if (!mensajes[numId].leido) {
                $.post(<%= Constantes.Rutas.PATCH %> + 'uptMsgRead', {"idM": mensajes[numId].id});
                mensajes[numId].leido = true;
                $('#iNumMensajes').html(getNumMessagesUnread(mensajes));
                actualizarBandejaActual();
            }
            $('#uSenderMesageShow').html(mensajes[numId].userSender);
            $('#uAsuntoMesageShow').html(mensajes[numId].asunto);
            $('#uTextoMesageShow').html(mensajes[numId].texto);
            $('#uResponseMesageShow').show();
            $('#showMessage').show();
        }
        function mostrarMensajeSalida(numId) {
            $('#uSenderMesageShow').html(mensajes[numId].userReceiver);
            $('#uAsuntoMesageShow').html(mensajes[numId].asunto);
            $('#uTextoMesageShow').html(mensajes[numId].texto);
            $('#uResponseMesageShow').hide();
            $('#showMessage').show();
        }
                
        function borrarMensaje(numId) {
            $.post(<%= Constantes.Rutas.PATCH %> + 'uptMsgDel', {"idM": mensajes[numId].id});
            var provisional = mensajes.slice(numId+1);
            mensajes = mensajes.slice(0,numId);
            mensajes = mensajes.concat(provisional);
            actualizarBandejaActual();
        }
        
        function actualizarBandejaActual() {
            eval('bandeja'+bandejaActual+'()');
        }
        
        var bandejaActual;
        $('#bandejaEntrada').click(bandejaEntrada);
        $('#bandejaSalida').click(bandejaSalida);
        
        $('#iNumMensajes').html(getNumMessagesUnread(mensajes));
        $('#nuevoMensaje').click(crearNuevoMensaje);
        
        ocultarShowMessage();
        bandejaEntrada();
    </script>